<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<link rel="stylesheet" href="./css/pagination.css">
	</head>
	<body>
		<ul class="pagination">
		  <li class="page-prev">
		    <a class="prev" href="#"><svg t="1580195949197" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4493" width="20" height="20"><path d="M906.78272 588.78976c-0.02048 8.4992-6.88128 15.36-15.38048 15.37024l-443.6992-0.01024 75.70432 191.68256c2.51904 6.42048 0.48128 13.76256-5.03808 17.90976-5.51936 4.16768-13.13792 4.1472-18.61632-0.09216l-376.5248-289.47456c-3.77856-2.89792-6.00064-7.41376-6.00064-12.16512 0-4.78208 2.22208-9.27744 6.00064-12.1856l376.5248-289.47456c2.7648-2.11968 6.06208-3.19488 9.37984-3.19488 3.23584 0 6.5024 1.03424 9.23648 3.10272 5.51936 4.1472 7.5776 11.48928 5.03808 17.90976L447.68256 419.84l443.71968-0.01024c8.4992 0.01024 15.36 6.88128 15.36 15.36L906.78272 588.78976z" p-id="4494" fill="#777777"></path></svg></a>
		  </li>
		  <li class="page-number active"><a href="#">1</a></li>
		  <li class="page-number"><a href="#">2</a></li>
		  <li class="page-number"><a href="#">3</a></li>
		  <li class="page-number"><a href="#">4</a></li>
		  <li class="page-number"><a href="#">5</a></li>
		  <li class="page-number"><a href="#">6</a></li>
		  <li class="page-next">
		    <a class="next" href="#"><svg t="1580195920917" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4995" width="20" height="20"><path d="M906.77248 512c0 4.77184-2.21184 9.2672-5.9904 12.17536l-376.5248 289.4848c-2.7648 2.11968-6.06208 3.18464-9.3696 3.18464-3.25632 0-6.5024-1.03424-9.24672-3.09248-5.50912-4.15744-7.5776-11.48928-5.03808-17.90976l75.71456-191.67232L132.58752 604.17024c-8.48896 0-15.36-6.88128-15.36-15.36l0-153.6c0-8.48896 6.87104-15.36 15.36-15.36l443.72992 0-75.71456-191.68256c-2.53952-6.42048-0.47104-13.75232 5.04832-17.90976 5.50912-4.15744 13.12768-4.13696 18.60608 0.09216l376.5248 289.4848C904.56064 502.7328 906.77248 507.22816 906.77248 512z" p-id="4996" fill="#777777"></path></svg></a>
		  </li>
		</ul>
	</body>
	<script type="text/javascript">
		window.onload=()=>{
			let prevLink = document.querySelector(".prev");
			let nextLink = document.querySelector(".next");
			let pagination = document.querySelector(".pagination");
			let pageNumberLinks = document.querySelectorAll(".page-number a");
			let maxPageIndex = pageNumberLinks.length - 1;
			pageNumberLinks.forEach((pageNumberLink, activeIndex) => {
			  pageNumberLink.addEventListener("click", () => {
			    pageNumberLinks.forEach(pageNumberLink =>
			      pageNumberLink.parentElement.classList.remove("active")
			    );
			    pageNumberLink.parentElement.classList.add("active");
			    pagination.style.setProperty(
			      "--active-index",
			      `${activeIndex}`
			    );
			  });
			});
			prevLink.addEventListener("click", () => {
			  pageNumberLinks.forEach(pageNumberLink =>
			    pageNumberLink.parentElement.classList.remove("active")
			  );
			  let activeIndex = Number(
			    pagination.style.getPropertyValue("--active-index")
			  );
			  activeIndex = activeIndex > 0 ? activeIndex - 1 : 0;
			  pageNumberLinks[activeIndex].parentElement.classList.add("active");
			  pagination.style.setProperty(
			    "--active-index",
			    `${activeIndex}`
			  );
			});
			nextLink.addEventListener("click", () => {
			  pageNumberLinks.forEach(pageNumberLink =>
			    pageNumberLink.parentElement.classList.remove("active")
			  );
			  let activeIndex = Number(
			    pagination.style.getPropertyValue("--active-index")
			  );
			  activeIndex = activeIndex < maxPageIndex ? activeIndex + 1 : maxPageIndex;
			  pageNumberLinks[activeIndex].parentElement.classList.add("active");
			  pagination.style.setProperty(
			    "--active-index",
			    `${activeIndex}`
			  );
			});
		}
	</script>
</html>
